<template>
  <div class="index">
    <h3>父组件</h3>
    <div class="container">
      <News>
        <!-- <template scope="{newsList}"> -->
        <!-- <template slot-scope="{newsList}"> -->
        <template v-slot="{newsList}">
          <ul>
            <li v-for="n in newsList" :key="n.id">
              {{n.title}}
            </li>
          </ul>
        </template>
      </News>

      <News>
        <template scope="{newsList}">
          <ol>
            <li v-for="n in newsList" :key="n.id">
              {{n.title}}
            </li>
          </ol>
        </template>
      </News>
    </div>
  </div>
</template>

<script>
  import News from './News'

  export default {
    name:'Index',
    components:{News}
  }
</script>

<style lang="less" scoped>
  .index {
    background-color: rgb(165, 164, 164);
    padding: 20px;
    border-radius: 10px;
  }
  .container {
    width: 100%;
    display: flex;
    justify-content: space-around;
  }
  h4 {
    background-color: orange;
    text-align: center;
  }
  img,video {
    width: 100%;
  }
</style>